<template>
  <view class="home">
    <view class="content">
      <uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current" :mode="mode"
                      :dots-styles="dotsStyles" field="content">
        <swiper class="swiper-box" @change="change" :current="swiperDotIndex">
          <swiper-item v-for="(item, index) in 3" :key="index">
            <view class="swiper-item" :class="'swiper-item' + index">
              <text style="color: #fff; font-size: 32px;">{{index+1}}</text>
            </view>
          </swiper-item>
        </swiper>
      </uni-swiper-dot>
    </view>
    <view>
      <view class="result-box">
        <text>您遇到问题时功能为：</text>
      </view>
      <uni-section type="line">
        <uni-data-select
            v-model="city"
            :localdata="candidates"
            placeholder="请选择所在功能"
            @change="change2"
        ></uni-data-select>
      </uni-section>
      <view class="wenben">
        <uni-section padding>
        <uni-easyinput type="textarea" v-model="value" placeholder="请填写您遇到的问题或者建议"></uni-easyinput>
      </uni-section>
      </view>

    </view>
    <view style="padding: 30rpx;">
      <button class="uni-btn-v" style="margin-top:45%;" @click="sumit">提交</button>
    </view>
  </view>

</template>



<script>
import { Mydadd
} from '@/common/api.js'
export default {
  components: {},
  data() {
    return {
      info: [{
        colorClass: 'uni-bg-red',
        url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
        content: '内容 A'
      },
        {
          colorClass: 'uni-bg-green',
          url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
          content: '内容 B'
        },
        {
          colorClass: 'uni-bg-blue',
          url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
          content: '内容 C'
        }
      ],
      dotStyle: [{
        backgroundColor: 'rgba(0, 0, 0, .3)',
        border: '1px rgba(0, 0, 0, .3) solid',
        color: '#fff',
        selectedBackgroundColor: 'rgba(0, 0, 0, .9)',
        selectedBorder: '1px rgba(0, 0, 0, .9) solid'
      }],
      modeIndex: -1,
      styleIndex: -1,
      current: 0,
      mode: 'default',
      dotsStyles: {},
      infor: {},
      swiperDotIndex: 0,
      // candidates: ['首页', '进货单', '销货单', '批量添加', '成本费用', '客户明细', '供应商明细'],
      candidates: [
        { value:"首页", text: "首页" },
        { value:"进货单", text: "进货单" },
        { value:"销货单", text: "销货单" },
        { value:"批量添加", text: "批量添加" },
        { value:"成本费用", text: "成本费用" },
        { value:"客户明细", text: "客户明细" },
        { value:"供应商明细", text: "供应商明细" },
      ],
      city: '',
      value: '',
      password: '',
      placeholderStyle: "color:#2979FF;font-size:14px",
      styles: {
        color: '#2979FF',
        borderColor: '#2979FF'
      }
    }
  },
  onLoad() {
    this.infor = uni.getStorageSync('infor');
    console.log("infor:", this.infor);
  },
  methods: {
    sumit(){
      if(!this.city){
        uni.showToast({
          title: '请选择所在功能',
          icon: 'none'
        })
        return false;
      }
      if(!this.value){
        uni.showToast({
          title: '请填写您的意见',
          icon: 'none'
        })
        return false;
      }
      const form = {
        name: this.infor.name,
        phone: this.infor.phone,
        advice: this.value,
        type: this.city,
        companyId: this.infor.companyId,
      }
      uni.showLoading({
        title: '加载中...',
      });
      Mydadd(form).then((res) => {
        uni.hideLoading();
        console.log(res.data);
        uni.showModal({
          content: '提交成功',
          confirmText: '确定',
          showCancel: false,
          success(res) {
            uni.navigateBack({
              delta: 1 // 返回的页面数，如果 delta
            })
          },
        });
      })
    },
    input(e) {
      console.log('输入内容：', e);
    },
    iconClick(type) {
      uni.showToast({
        title: `点击了${type==='prefix'?'左侧':'右侧'}的图标`,
        icon: 'none'
      })
    },
    change(e) {
      this.current = e.detail.current
    },
    change2(e) {
      console.log("e:", e);
      this.city = e;
    },
    selectStyle(index) {
      this.dotsStyles = this.dotStyle[index]
      this.styleIndex = index
    },
    selectMode(mode, index) {
      this.mode = mode
      this.modeIndex = index
      this.styleIndex = -1
      this.dotsStyles = this.dotStyle[0]
    },
    clickItem(e) {
      this.swiperDotIndex = e
    },
    onBanner(index) {
      console.log(22222, index);
    }
  }
}
</script>
<style lang="scss">
.uni-btn-v {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #F9363A ;
  color: #fff;
  font-size: 35rpx;
  font-weight: bold;
  border-radius: 80rpx;
  text-align: center;
  margin-top: 30rpx;
}
.wenben{
  margin-top: 10px;
}
.example-body {
  padding: 12px;
  background-color: #FFFFFF;
}

.result-box {
  text-align: center;
  padding: 20px 0px;
  font-size: 16px;
}
.swiper-box {
  height: 200px;
}

.swiper-item {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 200px;
  color: #fff;
}

.swiper-item0 {
  background-color: #cee1fd;
}

.swiper-item1 {
  background-color: #b2cef7;
}

.swiper-item2 {
  background-color: #cee1fd;
}

.image {
  width: 750rpx;
}

/* #ifndef APP-NVUE */
::v-deep .image img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

/* #endif */

@media screen and (min-width: 500px) {
  .uni-swiper-dot-box {
    width: 400px;
    margin: 0 auto;
    margin-top: 8px;
  }

  .image {
    width: 100%;
  }
}

.uni-bg-red {
  background-color: #ff5a5f;
}

.uni-bg-green {
  background-color: #09bb07;
}

.uni-bg-blue {
  background-color: #007aff;
}

.example-body {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  padding: 20rpx;
}

.example-body-item {

  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 15rpx;
  padding: 15rpx;
  height: 60rpx;
  /* #ifndef APP-NVUE */
  display: flex;
  padding: 0 15rpx;
  /* #endif */
  flex: 1;
  border-color: #e5e5e5;
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
}

.example-body-item-text {
  font-size: 28rpx;
  color: #333;
}

.example-body-dots {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50px;
  background-color: #333333;
  margin-left: 10rpx;
}

.active {
  border-style: solid;
  border-color: #007aff;
  border-width: 1px;
}
</style>


